<template>
    <q-card class="row q-ma-sm">
      <div class="col-6 p-status">
        <div class="fal">
          <div class="header">History - {{ '12424114(OB ID)' }}</div>
        </div>
        <q-card-section>
          <div class="row q-gutter-y-sm">
            <div class="col-12 fal">
              <div class="p-status-field">Stock Code :</div>
              <div>{{ '123456' }}</div>
            </div>

            <div class="col-12 fal">
              <div class="p-status-field">Serial No. :</div>
              <div>{{ '123456-45656' }}</div>
            </div>
            <div class="fal col-12">
              <div class="p-status-field">Defit from Car:</div>
              <div>{{ '123456' }}</div>
            </div>
            <div class="fal col-12">
              <div class="p-status-field">Workgroup:</div>
              <div>{{ '123456' }}</div>
            </div>

            <div class="fal col-12">
              <div class="p-status-field">System:</div>
              <div>{{ '123456' }}</div>
            </div>
          </div>
        </q-card-section>
      </div>

      <div class="col-6">
        <q-card-section class="row fac">
          <div class="col-6">
            <div class="p-status-field">Check In Time:</div>
            <div>{{ '123456' }}</div>

            <div class="p-status-field">Check In Time:</div>
            <div>{{ '123456' }}</div>
          </div>

          <div class="col-6">
            <vue-qr id="qr" :text="qr_code" :size="150"></vue-qr>
          </div>
        </q-card-section>
      </div>
    </q-card>

    <div class="col-12 q-pa-sm">
          <q-tabs
            v-model="tab"
            dense
            class="text-grey"
            active-color="black"
            activeBgColor="white"
            indicator-color="primary"
            align="justify"
            style="background-color: #dae3f4"
            narrow-indicator
          >
            <q-tab style="width: 100px" name="partDetail" label="Part Detail" />
            <q-tab style="width: 100px" name="record" label="Record" />
          </q-tabs>

          <q-separator />
          <q-tab-panels v-model="tab" animated style="width: auto">
            <q-tab-panel name="partDetail">
              <PartDetailForm></PartDetailForm>
            </q-tab-panel>

            <q-tab-panel name="record">
       
            </q-tab-panel>
          </q-tab-panels>
        </div>
</template>

<script setup lang="ts">
import PageContainer from 'src/components/container/PageContainer.vue';
import { ref } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import StockListTable from './StockListTable.vue';
import PartDetailForm from 'src/components/maintenance/PartDetailForm.vue';

const qr_code = ref(`{"CAT":"stockcode", "SN":"serialNo"}`);
const tab = ref('partDetail');


</script>

<style scoped>
.header {
  font-size: 1.1rem;
  font-weight: 900;
  margin: 10px;
}

.p-status-field {
  font-size: 0.8rem;
  font-weight: 900;
  width: auto;
}
</style>
